<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04-元素类名操作</title>
		<!--元素类名操作   针对css中类名，可以做添加、移除、切换、和包含类名操作
			addClass()	      有参【1个参，多个参】 
			                  功能：匹配元素集合中的所有元素添加一个类名或多个类名
							  语法：addClass("类名")
							  语法：addClass("类名1 类名2")
			removeClass()     有参	【1个参，多个参】 
				              功能：从匹配元素集合中的所有元素移除一个类名或多个类名
			toggleClass()	  功能：如果元素有指定类名则移除，没有则添加	
			hasClass()	      功能：检查匹配元素集合中是否存在指定类名，返回值bool
							  
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bg{
				width: 300px;
				height: 300px;
				background-color: #f00;
			}
			.bd{
				border: 10px solid #ffff00;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
	<div id="targetElment"></div>
	<button id="addClassBtn">添加类名</button>
	<button id="removeClassBtn">移除类名</button>
	<button id="toggleClassBtn">切换类名</button>
	<button id="hasClassBtn">判断存在类名</button>
	<div id="resultArea"></div>
	
		<script>
			
			//1.类名切换：  css存在可用类名  
			 //点击  添加类名  实现效果：300*300   红色背景色
			$("#addClassBtn").click(function(){
				$("#targetElment").addClass("bg bd");
				$("#resultArea").html("<h4>已经切换样式：.bg</h4>")
			});
			//2.移除类名：  实现效果： 点击移除类名 实现300*300   红色背景色
			$("#removeClassBtn").click(function(){
				$("#targetElment").removeClass("bd bg");
				$("#resultArea").html("<h4>已经移除样式：.bg</h4>")
			});
			//3.切换类名：  实现效果： 点击切换类名 实现300*300的圆   红色背景色
			//4.样式全部移除，实现效果，实现300*300 红色背景色
			$("#toggleClassBtn").click(function(){
			//存在bg 移除	不存在  添加 bg
			$("#targetElment").toggleClass("bg");
				$("#resultArea").html("<h4>已经切换样式:存在移除，不存在添加</h4>")
			});
			//5.检查类名是否存在
			$("#hasClassBtn").click(function(){
			//存在bg 移除	不存在  添加 bg
			    var hc=$("#targetElment").hasClass("bg");
				$("#resultArea").text("目标元素 bg 类名是否存在："+hc)
			});
			
			
			
		</script>
	</body>
</html>